<template>
	<el-card>
		<div style="font-weight:bold;margin-bottom:10px;">库存水平</div>
		<div ref="chartRef" style="height:200px;width:100%;"></div>
	</el-card>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
const props = defineProps({ data: Array })
const chartRef = ref()
let chart
const renderChart = () => {
	if (!chart) chart = echarts.init(chartRef.value)
	chart.setOption({
		grid: { left: 40, right: 16, bottom: 36, top: 36, containLabel: true },
		xAxis: {
			type: 'category',
			data: props.data.map(d => d.job)
		},
		yAxis: { type: 'value', minInterval: 1 },
		series: [
			{
				type: 'bar',
				barWidth: 26,
				data: props.data.map(d => d.value),
				itemStyle: { color: '#e3cb94' }
			}
		]
	})
}
onMounted(renderChart)
watch(() => props.data, renderChart)
</script>
  
